// 分类

<template>
  <view>
    <!-- 搜索 -->
    <view class="search-box">
      <view class="search">
        <text class="iconfont icon-sousuo"></text>
        <input type="text" placeholder="搜索商品" v-model="keyword" @input="handleInput" />
      </view>
    </view>
    <view class="category-box">
      <!-- 菜单 -->
      <scroll-view class="category-menu" scroll-y enable-flex>
        <view
          class="category-menu-item"
          :class="current === index ? 'category-menu-item-selected' : ''"
          v-for="(item, index) in menuList"
          :key="item.id"
          @tap="changeMenu(index, item.id)"
        >
          <view class="name">{{ item.name }}</view>
          <view
            class="number"
            :class="item.cart_number >= 10 ? 'number1' : item.cart_number >= 100 ? 'number2' : ''"
            v-if="item.cart_number"
            >{{ item.cart_number }}</view
          >
        </view>
      </scroll-view>
      <!-- 商品 -->
      <scroll-view
        class="category-goods"
        scroll-y
        @scrolltolower="scrollToLower"
        :style="{ paddingBottom: btnNumber ? '128rpx' : '' }"
      >
        <scroll-view
          class="child-category"
          scroll-x
          enable-flex
          v-if="menuList[current]&&menuList[current].childMenu&&menuList[current].childMenu.length"
        >
          <view
            class="child-category-item"
            :class="index === childMenuIndex ? 'child-category-item-selected' : ''"
            v-for="(item, index) in menuList[current].childMenu"
            :key="item.id"
            @tap="getGoodsListByCategory(index, item.id)"
          >
            {{ item.name }}
          </view>
        </scroll-view>
        <view class="goods-box">
          <view
            class="goods-item"
            v-for="(item, index) in goodsList"
            :key="item.id"
            @tap="toGoodsDetailPage(item.id)"
          >
            <view class="item-img">
              <image :src="item.goods_image" mode="aspectFit" />
            </view>
            <view class="item-info">
              <view class="item-title">{{ item.goods_name }}</view>
              <view class="item-other">
                <view class="item-price">
                  <view
                    class="price-box"
                    v-if="userInfo.binding == 1 && item.price !== '' && priceStatus"
                  >
                    <text class="price1">￥</text>
                    <text class="price2">{{ item.price }}</text>
                    <text class="digit">.{{ item.decimal }}</text>
                  </view>
                </view>
                <view class="item-btn" @tap.stop>
                  <text
                    class="iconfont icon-a--"
                    @tap="subNumber(item.id, item.cart_number)"
                    v-if="item.cart_status == 1"
                  ></text>
                  <view class="item-number" v-if="item.cart_status == 1">
                    <input
                      type="text"
                      v-model.number="item.cart_number"
                      @focus="numberInputFocus(item.cart_number)"
                      @change="numberInputChange(index, item.id, item.cart_number, $event)"
                    />
                  </view>
                  <view class="t-icon t-icon-a-" @tap.stop="showPop(item)"></view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 空白页 -->
        <dht-empty v-if="noData" type="no_data"></dht-empty>
      </scroll-view>
    </view>
    <!-- 按钮 -->
    <view class="btn-box" v-if="btnNumber && userInfo.binding == 1">
      <view class="btn-number">已选{{ btnNumber }}件</view>
      <view class="btn-price" @tap="toShoppingPage">
        <template v-if="priceStatus">￥{{ btnPrice }} </template>
        去订货
      </view>
    </view>
    <!-- 选择规格弹出框 -->
    <pop-choose :goods="goods" v-model="show"></pop-choose>
  </view>
</template>

<script>
import { mapState } from 'vuex'

export default {
  onShow() {
    this.userInfo = uni.getStorageSync('userInfo')
  },
  async onLoad() {
    uni.$on('refreshCategoryPage', async () => {
      this.page = 1
      this.hasMore = true
      this.emptyGoodsList = true
      // this.keyword = ''
      await this.getMenuList()
      this.getGoodsList()
      this.getCartList()
    })

    await this.getMenuList()
    this.id = this.menuList[0].id
    this.getGoodsList()
    this.getCartList()
  },
  data() {
    return {
      // 空白页
      noData: false,
      current: 0,
      menuIndex: -1,
      childMenuIndex: -1,
      id: '',
      page: 1,
      hasMore: true,
      keyword: '',
      menuList: [],
      goodsList: [],
      userInfo: null,
      show: false,
      goods: null,
      btnNumber: 0,
      btnPrice: 0,
      oldNumber: '',
      emptyGoodsList: false
    }
  },
  methods: {
    // 获取购物车列表
    async getCartList() {
      this.btnNumber = 0
      this.btnPrice = 0
      const res = await this.$http.post('/api/kuerp/order/index/getCart')
      if (res.code == 200) {
        res.data.forEach((item) => {
          this.btnNumber += item.number
          this.btnPrice += item.number * (item.goods.price + '.' + item.goods.decimal)
        })
        this.btnPrice = this.btnPrice.toFixed(res.data[0].goods.decimal.length)
      }
    },
    // 订货单弹窗
    showPop(goods) {
      this.goods = goods
      this.show = true
    },
    // 搜索商品
    handleInput() {
      clearTimeout(this.timeId)
      this.timeId = setTimeout(() => {
        this.goodsList = []
        this.page = 1
        this.hasMore = true
        this.getGoodsList()
      }, 1000)
    },
    // 切换菜单
    changeMenu(index, id) {
      if (this.id === id) return
      this.childMenuIndex = -1
      this.page = 1
      this.hasMore = true
      this.goodsList = []
      this.current = index
      this.id = id
      this.keyword = ''
      this.getGoodsList()
    },
    // 获取菜单列表
    async getMenuList() {
      const menuRes = await this.$http.post('/api/kuerp/order/index/goodsTypeList')
      if (menuRes.code == 200) {
        this.menuList = menuRes.data
        this.menuList.forEach(async (item) => {
          const childMenuRes = await this.$http.post('/api/kuerp/order/index/goodsTypeList', {
            pid: item.id
          })
          if (childMenuRes.code == 200) item.childMenu = childMenuRes.data
        })
      }
    },
    // 获取商品列表
    async getGoodsList() {
      let goodsList = []
      const res = await this.$http.post('/api/kuerp/order/index/goodsGoodsList', {
        keyword: this.keyword,
        goods_type_id: this.id,
        page: this.page
      })
      if (res.code == 200) {
        if (this.emptyGoodsList) {
          this.goodsList = []
          this.emptyGoodsList = false
        }
        if (!res.data.list.length) this.hasMore = false

        goodsList = res.data.list
        goodsList.map(
          (item) =>
            (item.goods_image = item.goods_image.startsWith('http')
              ? item.goods_image
              : this.$baseURL + item.goods_image)
        )
        this.goodsList = [...this.goodsList, ...goodsList]
        this.noData = !this.goodsList.length
      }
    },
    // 通过分类获取商品
    getGoodsListByCategory(index, id) {
      if (this.childMenuIndex === index) {
        this.childMenuIndex = -1
        this.id = this.menuList[this.current].id
      } else {
        this.childMenuIndex = index
        this.id = id
      }
      this.page = 1
      this.hasMore = true
      this.goodsList = []
      this.keyword = ''
      this.getGoodsList()
    },
    // 商品滚动到底部
    scrollToLower() {
      if (!this.hasMore) return
      this.page++
      this.getGoodsList()
    },
    // 减
    async subNumber(id, number) {
      if (number === 1) return
      const res = await this.$http.post('/api/kuerp/order/index/editCart', {
        goods_id: id,
        number: --number
      })
      if (res.code == 200) {
        uni.$emit('refreshCategoryPage')
      }
    },
    // 监听输入框获取焦点
    numberInputFocus(number) {
      this.oldNumber = number
    },
    // 监听输入框改变
    async numberInputChange(index, id, number, e) {
      if (this.oldNumber === number) return

      if (!e.detail.value || e.detail.value === '0') {
        this.goodsList[index].cart_number = this.oldNumber
        return
      }

      const res = await this.$http.post('/api/kuerp/order/index/editCart', {
        goods_id: id,
        number
      })
      if (res.code == 200) {
        uni.$emit('refreshCategoryPage')
      }
    },
    toGoodsDetailPage(id) {
      uni.navigateTo({ url: `/pages/home/homeGoods/goodsDetail?id=${id}` })
    },
    toShoppingPage() {
      uni.switchTab({ url: '/pages/shopping/index' })
    }
  },
  computed: {
    ...mapState(['priceStatus'])
  }
}
</script>

<style>
page {
  padding-top: 90rpx;
}
</style>
<style lang="scss" scoped>
// 搜索
.search-box {
  position: fixed;
  width: 750rpx;
  top: 0;
  left: 0;
  z-index: 99999;
  background-color: #fff;
  height: 90rpx;
  .search {
    display: flex;
    align-items: center;
    margin: 0 auto;
    width: 702rpx;
    height: 70rpx;
    background: #f4f4f4;
    border-radius: 35rpx;
    text {
      margin: 0 26rpx;
      color: 808080;
    }
    input {
      flex: 1;
    }
  }
}

// 分类
.category-box {
  display: flex;
  height: calc(100vh - 90rpx);
}

// 分类-菜单
.category-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 216rpx;
  height: 100%;
  .category-menu-item {
    position: relative;
    width: 80%;
    padding: 20rpx 0;
    color: #666666;
    .name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .number {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      right: -20rpx;
      width: 28rpx;
      height: 28rpx;
      background: #fe492f;
      border-radius: 50%;
      font-size: 20rpx;
      font-weight: 400;
      color: #ffffff;
      &.number1 {
        width: 42rpx;
        border-radius: 14rpx;
      }
      &.number2 {
        width: 52rpx;
        border-radius: 14rpx;
      }
    }
    &.category-menu-item-selected {
      font-weight: 600;
      color: #fe492f;
      &::before {
        content: '';
        position: absolute;
        left: -14rpx;
        top: 50%;
        transform: translateY(-50%);
        display: inline-block;
        width: 8rpx;
        height: 36rpx;
        background: #fe492f;
        border-radius: 4rpx;
      }
    }
  }
}

// 分类-商品
.category-goods {
  width: 534rpx;
  height: 100%;
  background-color: #f7f7f7;
  border-radius: 20rpx 20rpx 0 0;
  .child-category {
    display: flex;
    padding: 20rpx 0 0;
    width: 100%;
    height: 72rpx;
    white-space: nowrap;
    .child-category-item {
      display: flex;
      align-items: center;
      padding: 0 22rpx;
      margin-right: 12rpx;
      height: 52rpx;
      background: #ffffff;
      border-radius: 30rpx;
      font-size: 24rpx;
      color: #333333;
      &:first-child {
        margin-left: 24rpx;
      }
      &.child-category-item-selected {
        background: #fff5f4;
        border: 2rpx solid #fe3d23;
        color: #fe3d23;
      }
    }
  }
  .goods-box {
    margin-top: 20rpx;
    .goods-item {
      display: flex;
      align-items: center;
      margin: 0 auto 16rpx;
      padding: 0 20rpx;
      width: 486rpx;
      height: 248rpx;
      background: #ffffff;
      border-radius: 12rpx;
      .item-img {
        display: flex;
        align-items: center;
        image {
          width: 160rpx;
          height: 160rpx;
        }
      }
      .item-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 20rpx;
        padding: 26rpx 0;
        height: 100%;
        .item-title {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          font-size: 25rpx;
          color: #111111;
        }
        .item-other {
          .item-price {
            .price-box {
              // display: flex;
              // justify-content: center;
              // align-items: center;
              .price1 {
                font-size: 24rpx;
                color: #fe3d23;
                font-weight: 600;
              }
              .price2 {
                font-size: 30rpx;
                color: #fe3d23;
                font-weight: 600;
              }
              .digit {
                font-size: 24rpx;
                color: #fe3d23;
                font-weight: 600;
              }
            }
          }
          .item-btn {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-top: 8rpx;
            .icon-a-- {
              font-size: 48rpx;
              color: #fe492f;
            }
            .item-number {
              margin: 0 20rpx;
              width: 100rpx;
              height: 44rpx;
              background: #f4f4f4;
              border-radius: 12rpx;
              text-align: center;
              font-weight: 500;
              color: #111111;
              input {
              }
            }
            .t-icon-a- {
              width: 48rpx;
              height: 48rpx;
            }
          }
        }
      }
    }
  }
}

// 按钮
.btn-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 0 24rpx;
  width: 750rpx;
  height: 128rpx;
  background: #fafafa;
  box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(0);
  .btn-number {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
  }
  .btn-price {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 486rpx;
    height: 80rpx;
    background: #fe3d23;
    border-radius: 200rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #ffffff;
  }
}
</style>
